<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../../Css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../../Css/bootstrap-responsive.css" />
    <link rel="stylesheet" type="text/css" href="../../Css/style.css" />
    <script type="text/javascript" src="../../Js/jquery.js"></script>
    <script type="text/javascript" src="../Js/jquery.sorted.js"></script>
    <script type="text/javascript" src="../../Js/bootstrap.js"></script>
    <script type="text/javascript" src="../../Js/ckform.js"></script>
    <script type="text/javascript" src="../../Js/common.js"></script>



    <style type="text/css">
        body {
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }


    </style>

</head>
<body>
<form id="myForm" class="definewidth m20">
    <table class="table table-bordered table-hover definewidth m10">
        <tr>
            <td class="tableleft">用户账户</td>
            <td><input type="text" name="loginName" id="loginName"/><span id="loginNameMsg"></span></td>
        </tr>
        <tr>
            <td class="tableleft">密码</td>
            <td><input type="password" name="password" id="password"/><span id="passwordMsg"></span></td>
        </tr>
        <tr>
            <td class="tableleft">真实姓名</td>
            <td><input type="text" name="trueName" id="trueName"/><span id="trueNameMsg"></span></td>
        </tr>
        <tr>
            <td class="tableleft">邮箱</td>
            <td><input type="text" name="email" value="" id="email"/><span id="emailMag"></span></td>
        </tr>
        <tr>
            <td class="tableleft">状态</td>
            <td>
                <input type="radio" name="status" value="0" checked/> 启用
                <input type="radio" name="status" value="1" /> 禁用
            </td>
        </tr>
        <tr>
            <td class="tableleft">角色</td>
            <td>
                <!--隐藏input，存放下拉菜单中被选中角色的id，传递到后台-->
                <input type="hidden" id="roleId" name="roleId" value="">
                <select id="u_rid" name="u_rid"></select>
            </td>
        </tr>
        <tr>
            <td class="tableleft"></td>
            <td>
                <button id="btnAdd" class="btn btn-primary" type="button">添加</button>&nbsp;&nbsp;
                <button type="button" class="btn btn-success" name="backid" id="backid">返回列表</button>
            </td>
        </tr>
    </table>
</form>
</body>
</html>

<script>
    $(function () {

        //用户账号非空和唯一性验证
        $("#loginName").blur(function () {
            isLoginName();
        })

        //密码非空和强度验证
        $("#password").blur(function () {
            isPassword();
        })

        //真实姓名非空验证
        $("#trueName").blur(function () {
            isTrueName();
        })

        //邮箱格式验证
        $("#email").blur(function () {
            isEmail($("#email").val())
        })

        //异步请求，添加用户的页面的下拉菜单中填充所有角色
        $.ajax({
            type: "GET",
            url: "/sysUser/roles",
            data: "",//主要是分页和多条件参数数据
            dataType:"json",
            success: function(vo){
                $("#u_rid").append('<option value="0">---请选择---</option>')
                let list = vo.list;
                for(let i = 0; i < list.length; i++){
                    let id = list[i].id;
                    let roleName = list[i].roleName;
                    $("#u_rid").append('<option value="'+id+'">' + roleName + '</option>');
                }
            }
        });

        //给下拉菜单绑定change事件，当选中某个option后，获取它的value值，也就是角色的id，放入隐藏的input中，传递给后台
        $("#u_rid").change(function () {
            var roleId=$("#u_rid option:selected").val();
            $("#roleId").val(roleId);
        })

        //添加用户的异步请求
        $("#btnAdd").click(function (){
            $.ajax({
                type: "POST",
                url: "/sysUser/",
                data: $("#myForm").serialize(),//请求参数
                dataType:"json",
                success: function(vo){
                    if(vo.code==200) {
                        window.location.href = "index.html";
                    }else{
                        alert("添加失败！"+vo.msg);
                    }
                }
            });
        });
        //返回index页面
        $('#backid').click(function(){
            window.location.href="index.html";
        });
    });

    //用户账号非空和唯一性验证
    function isLoginName() {
        var loginName = $("#loginName").val();
        if (loginName==""){
            $("#loginNameMsg").html("用户账号不能为空！")
            $("#loginNameMsg").css("color","red");
        }else {
            //唯一性验证
            $.ajax({
                type:"GET",
                url:"/sysUser/checkName",
                data:"loginName="+loginName,
                dataType:"json",
                success:function (vo) {
                    if (vo.code==200){
                        $("#loginNameMsg").html(vo.msg);
                        $("#loginNameMsg").css("color","green")
                    }else {
                        $("#loginNameMsg").html(vo.msg);
                        $("#loginNameMsg").css("color","red")
                    }
                }
            })
        }
    }

    //密码非空和强度验证
    function isPassword() {
        var password = $("#password").val();
        if (password==""){
            $("#passwordMsg").html("密码不能为空！");
            $("#passwordMsg").css("color","red")
        }else {
            //密码强度验证
            $('#password').keyup(function(e) {
                var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
                var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
                var enoughRegex = new RegExp("(?=.{6,}).*", "g");
                if (false == enoughRegex.test($(this).val())) {
                    $('#passwordMsg').html('More Characters');
                } else if (strongRegex.test($(this).val())) {;
                    $('#passwordMsg').html('Strong!');
                } else if (mediumRegex.test($(this).val())) {
                    $('#passwordMsg').html('Medium!');
                } else {
                    $('#passwordMsg').html('Weak!');
                }
            });
        }
    }

    //真实姓名非空验证
    function isTrueName() {
        if ($("#trueName").val()==""){
            $("#trueNameMsg").html("真实姓名不能为空！").css("color","red");
        }else {
            $("#trueNameMsg").html("真实姓名非空验证通过！").css("color","green");
        }
    }

    //邮箱格式验证
    function isEmail(str) {
        var reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
        if(reg.test(str)) {
            $("#emailMag").html("邮箱验证通过!").css("color", "green");
        }else {
            $("#emailMag").html("邮箱验证不合法!").css("color", "red");
        }
    }


</script>